<template>
  <div class="MyVMdPreview">
    <div class="bar">
      <div style="height: 3rem"></div>
      <van-nav-bar :fixed="true" title="文章详情" left-text="返回" left-arrow @click-left="returnPage" @click-right="editArticleInfo">
        <template #right>
          <van-icon name="add-o" size="18" />
        </template>
      </van-nav-bar>
    </div>
    <div class="head">
      <div class="article-title">
        {{ title }}
        <van-divider />
      </div>
    </div>
    <div class="article-bar-top">
      <van-row>
        <van-col>作者： 张三</van-col>
      </van-row>
      <van-row>
        <van-col span="6">点赞：500</van-col>
        <van-col span="6">收藏：400</van-col>
        <van-col span="6">转发：100</van-col>
      </van-row>
      <div class="tag-class">
        <van-row>
          <van-col><van-tag type="primary">标签</van-tag></van-col>
          <van-col><van-tag type="primary">标签</van-tag></van-col>
          <van-col><van-tag type="primary">标签</van-tag></van-col>
        </van-row>
      </div>
    </div>
    <div class="context">
      <v-md-editor :value="md" mode="preview"></v-md-editor>
    </div>
    <div class="down">
      <van-row type="flex" justify="center">
        <van-col span="6"><van-button round color="linear-gradient(to right, #0ec0d7, #3296fa)" icon="good-job-o" @click="goodClick"></van-button></van-col>
        <van-col span="6"><van-button round color="linear-gradient(to right, #0ec0d7, #3296fa)" icon="share-o" @click="shareClick"></van-button></van-col>
        <van-col span="6"><van-button round color="linear-gradient(to right, #0ec0d7, #3296fa)" icon="star-o" @click="starClick"></van-button></van-col>
      </van-row>
    </div>
    <van-share-sheet v-model="showShare" title="立即分享给好友" :options="options" />
  </div>
</template>

<script>
import { Toast } from 'vant'

export default {
  name: 'MyVMdPreviewComponent',
  data() {
    return {
      md: '## 哇 真的是你呀 哈哈 哎呀\n # 全名制作人们大家好，我是练习时长两年半的个人练习生蔡徐坤，喜欢唱、跳、rap、篮球，music\n ```javascript \n console.log("hello,world")\n```\n **Java中的原子类是如何保证线程安全的 介绍 在并发编程中，多个线程同时对共享数据进行读写操作可能会导致数据竞争和不一致的结果。为了解决这个问题，Java提供了原子类（Atomic classes），它们能够通过特定的操作确保对共享数据的原子性访问，从而保证线程安全。原子类是基于硬件的原子性操作指令或锁机制来实现的，它们提供了一种高效且线程安全的方式来执行常见的数据操作，如增加、减少、交换值等。**',
      title: '鸡哥跳舞',
      showShare: false,
      options: [
        [
          { name: '微信', icon: 'wechat' },
          { name: '朋友圈', icon: 'wechat-moments' },
          { name: '微博', icon: 'weibo' },
          { name: 'QQ', icon: 'qq' }
        ],
        [
          { name: '复制链接', icon: 'link' },
          { name: '分享海报', icon: 'poster' },
          { name: '二维码', icon: 'qrcode' },
          { name: '小程序码', icon: 'weapp-qrcode' }
        ]
      ]
    }
  },
  methods: {
    returnPage() {
      this.$router.back()
    }, // 新增文章
    editArticleInfo() {
      this.$router.push('/edit')
    },
    // 分享
    shareClick() {
      this.showShare = true
    },
    // 点赞
    goodClick() {
      Toast.success('点赞成功')
    },
    // 收藏
    starClick() {
      Toast.success('收藏成功')
    }
  }
}
</script>

<style lang="less" scoped>
.head {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  height: 10vh; /* 可根据需要设置容器的高度 */
}
.article-title {
  font-size: 28px;
  word-wrap: break-word;
  color: #222226;
  font-weight: 600;
  margin: 0;
  word-break: break-all;
  /* 文字阴影效果 */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  /* 文字下划线效果 */
  text-decoration: underline;
  /* 文字加粗效果 */
  font-weight: bold;

  /* 文字大小写转换效果 */
  text-transform: uppercase;
}

.down {
  border: 2px solid #0ec0d7; /* 添加边框 */
  border-radius: 10px; /* 添加圆角边框 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 添加黑色阴影效果 */
  padding: 12px; /* 添加内边距 */
  margin: 0 20px; /* 调整左右边缘距离 */
}

.article-bar-top {
  color: #999aaa;
  border: 2px solid #333; /* 添加边框 */
  border-radius: 10px; /* 添加圆角边框 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 添加黑色阴影效果 */
  background-color: #f5f5f5; /* 设置背景颜色 */
  padding: 12px; /* 添加内边距 */
  margin: 0 20px; /* 调整左右边缘距离 */
}
</style>
